<template>
    <div>

        <el-card>

            <el-input v-model="Query.username" size="small" style="width: 240px;margin: 5px" placeholder="请输入账号"
                clearable></el-input>
            <el-date-picker v-model="Query.dateNumber" size="small" type="daterange" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="ChangeData" style="margin: 10px 3px;">
            </el-date-picker>
            <el-select v-model="Query.state" size="small" placeholder="请选择状态" style="width: 240px;margin:0px 5px" clearable>
                <el-option v-for="item in ThourState" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-input v-model="Query.channel" size="small" style="width: 240px;margin: 5px" placeholder="请输入通道"
                clearable></el-input>
            <el-input v-model="Query.gateway" size="small" style="width: 240px;margin: 5px" placeholder="请输入网关"
                clearable></el-input>
            <el-input v-model="Query.address" size="small" style="width: 240px;margin: 5px" placeholder="请输入地区"
                clearable></el-input>
            <el-input v-model="Query.phone" size="small" style="width: 240px;margin: 5px" placeholder="请输入号码"
                clearable></el-input>
            <el-input v-model="Query.content" size="small" style="width: 240px;margin: 5px" placeholder="请输入短信内容"
                clearable></el-input>
            <el-input v-model="Query.senderId" size="small" style="width: 240px;margin: 5px" placeholder="请输入SenderId"
                clearable></el-input>


            <el-button type="primary" size="mini" icon="el-icon-search" @click="Thoroughfare()">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

            <br>
            <br>

            <el-table :data="tableData.pageList" style="width: 100%" id="apiIndex">
                <el-table-column type="index" width="50" fixed align="center">
                </el-table-column>

                <el-table-column fixed prop="time" align="center" width="160" label="生成时间" />
                <el-table-column fixed prop="uid" align="center" label="UID" />
                <el-table-column fixed prop="username" align="center" label="账号" />
                <el-table-column fixed align="center" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.state == 0">全部状态</span>
                        <span v-else-if="scope.row.state == 1">成功</span>
                        <span v-else-if="scope.row.state == 2">失败 </span>
                        <span v-else-if="scope.row.state == 3">未知</span>
                        <span v-else>~</span>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="channel" align="center" label="通道" />

                <el-table-column fixed prop="gateway" align="center" label="网关" />

                <el-table-column fixed prop="address" align="center" label="地区" />

                <el-table-column fixed prop="phone" align="center" label="号码" />

                <el-table-column fixed prop="content" align="center" label="短信内容" />

                <el-table-column fixed prop="senderId" align="center" label="SenderId" />

                <el-table-column fixed prop="coding" align="center" label="编码" />

                <el-table-column fixed prop="num" align="center" label="条数" />
                <el-table-column fixed prop="timing" align="center" label="定时" />
                <el-table-column fixed prop="statusCode" align="center" label="状态码" />
                <el-table-column fixed prop="userBilling" align="center" label="用户计费" />

                <el-table-column fixed prop="unit" align="center" label="单位" />
            </el-table>




            <br>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100, 1000]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.totalCount" class="pagingdown">
            </el-pagination>
        </el-card>
    </div>
</template>
<script>
import { DownlinkQuery } from '@/api/thoroughfare/user'
export default {
    data() {
        return {
            pageCode: 1,
            pageSize: 10,
            channelName: '',
            stateThour: '',
            tableData: [],
            ThourState: [
                {
                    value: 0,
                    label: '全部状态'
                },
                {
                    value: 1,
                    label: '成功'
                },
                {
                    value: 2,
                    label: '失败'
                },
                {
                    value: 3,
                    label: '未知'
                },
            ],
            Query: {
                username: '',
                state: '',
                channel: '',
                gateway: '',
                address: '',
                phone: '',
                content: '',
                senderId: '',
                StarTimes: '',
                EndTimes: '',
                dateNumber: ''
            }


        }
    },
    async created() {
        this.Thoroughfare()
    },
    methods: {


        //  查询
        async Thoroughfare() {

            let thoroug = {
                pageCode: this.pageCode,
                pageSize: this.pageSize,
                time1: this.Query.StarTimes,
                time2: this.Query.EndTimes,
                username: this.Query.username,
                state: this.Query.state,
                channel: this.Query.channel,
                gateway: this.Query.gateway,
                address: this.Query.address,
                phone: this.Query.phone,
                content: this.Query.content,
                senderId: this.Query.senderId,
            }
            let resThoroug = await DownlinkQuery(thoroug)
            if (resThoroug.code == 200) {
                this.tableData = resThoroug.data
            }
        },
        resetQuery() {
                this.Query.username = ''
                this.Query.state= ''
                this.Query.channel= ''
               this.Query.gateway= ''
                this.Query.address= ''
                this.Query.phone= ''
                this.Query.content= ''
                this.Query.senderId= ''
                this.Query.StarTimes=''
                this.Query.EndTimes=''
                this.Query.dateNumber=''
            this.Thoroughfare();

        },
        async handleSizeChange(val) {
            this.pageSize = val;
            this.Thoroughfare();
        },
        async handleCurrentChange(val) {
            this.pageCode = val;
            this.Thoroughfare();
        },
        ChangeData(e) {
            if (e) {
                this.Query.StarTimes = e[0]
                this.Query.EndTimes = e[1]
            } else {
                this.Query.StarTimes = ''
                this.Query.EndTimes = ''
            }
        }

    },
};


</script>
<style scoped>
 .pagingdown{
    display: flex;
    align-items: center;
  justify-content: flex-end;    
  }
</style>